<template>
  <div class="cart-container">
    <div class="my-head">
      我的购物车
    </div>
    <ul class="item-list">
      <li class="item-list-box"
          v-for="(item,i) in list"
          :key="i">
        <van-swipe-cell>
          <van-card :price="item.productPrice * item.productNum"
                    :title="item.productName"
                    :desc="item.checked?'已选中':''"
                    :class="item.checked?'goods-card-checked':'goods-card'"
                    :thumb="`/img/${item.productImage}`">
            <template #num>
              <van-stepper v-model="item.productNum" />
            </template>
          </van-card>
          <template #left>
            <van-button square
                        :text="item.checked?'取消':'选择'"
                        :type="item.checked?'warning':'info'"
                        class="left-button"
                        @click="item.checked=!item.checked" />
          </template>
          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        @click="del(item.productId)"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
      </li>
    </ul>
    <van-row>
      <van-col span="10">
        <van-button v-if="!allCheckedState"
                    type="info"
                    @click="allChecked">全 选</van-button>
        <van-button v-else
                    type="warning"
                    @click="cancel">取 消</van-button>
      </van-col>
      <van-col span="14">
        <div class="total-pay">
          <span>总计: {{totalPrice}}元 </span>
          <van-button type="danger"
                      @click="toPay">去 结 算</van-button>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  methods: {
    ...mapMutations(['del', 'allChecked', 'cancel']),
    toPay () {
      console.log(this.totalPrice, 123)
      if (this.totalPrice) {
        this.$toast.loading({
          durations: 3000,
          message: `合计: ${this.totalPrice}元,正在确认支付...`
        })
      } else {
        this.$toast.fail('尚未选择任何商品')
      }
    }
  },
  computed: {
    ...mapState(['list']),
    ...mapGetters(['totalPrice', 'allCheckedState'])
  }
}
</script>
<style scoped lang="less">
.my-head {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 38px;
  border-bottom: 1px solid #ccc;
  background-color: #0af;
  color: #fff;
}
.goods-card {
  margin: 0;
  background-color: #fff;
}
.goods-card-checked {
  margin: 0;
  background-color: rgb(189, 231, 255);
}

.delete-button {
  height: 100%;
}
.left-button {
  height: 100%;
}

.total-pay {
  display: flex;
  font-size: 36px;
  justify-content: space-between;
  align-items: center;
}
</style>
